app/posts/[slug]/page.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import { notFound } from 'next/navigation'
import Markdown from 'markdown-to-jsx'

import InfoBar from '~/components/InfoBar'
import { getPostSlugs, loadSinglePage } from '~/utils/post'

export async function generateStaticParams() {
  const slugs = await getPostSlugs()
  return slugs.map((slug: string) => ({ slug }))
}

export default async function Post({ params: { slug } }) {
  const post = await loadSinglePage(slug)
  if (!post) notFound()

  return (
    <>
      <h1 className="pageTitle">
        {post.title}
      </h1>
      <main className="mainColumn card">
        <InfoBar authorName={post.author} publishedDate={post.date} />
        <Markdown>{post.body}</Markdown>
      </main>
    </>
  )
}